<template>
	<div class="m-20 container">
		<div class="mb-20 navbar">
			<el-button plain @click="goBack">{{ $t('common.back') }}</el-button>
			<span style="font-weight: 500">占成账单详情</span>
		</div>
		<div class="team-detail flex border mb-20" v-loading="loading">
			<div class="team-left">
				<p>
					<span>{{ curAgent.proxyName }}</span>
					<el-tag effect="plain" size="mini">
						{{ curAgent.proxyLevel }}/{{ curAgent.proxyLevelName }}
					</el-tag>
				</p>
				<p>
					本期账单
					<el-tooltip placement="top-start">
						<div slot="content">
							「团队盈亏」为我的团队三方场馆盈亏金额之和。
							<br />
							「下级团队盈亏」为我的下级团队三方场馆盈亏金额之和。如果「下级团队盈亏」为正，向下级付钱；如果「下级团队盈亏」为负，向下级收钱。
							<br />
							「个人盈亏」=团队盈亏-下级团队盈亏。
						</div>
						<i class="el-icon-question"></i>
					</el-tooltip>
				</p>
				<p>
					{{
						dayjs(String(curAgent.cycleStartDate)).format(
							'YYYY-MM-DD'
						)
					}}
					00:00:00 ～
					{{
						dayjs(String(curAgent.cycleEndDate)).format(
							'YYYY-MM-DD'
						)
					}}
					23:59:59
					<span style="color: #409eff" v-if="curData.cycleRemark">
						({{ curData.cycleRemark }})
					</span>
				</p>
			</div>
			<div class="team-right flex">
				<div
					class="right-item"
					v-for="(item, index) in teamDetailList"
					:key="index"
				>
					<template v-if="item.prop === '='">=</template>
					<template v-else-if="item.prop === '-'">-</template>
					<template v-else>
						<div>
							<span>{{ item.label }}</span>
						</div>
						<div
							class="num"
							:style="handleNumberColor(curAgent[item.prop])"
						>
							{{
								handleNumber(
									'USTD',
									curAgent[item.prop],
									2,
									true,
									true
								)
							}}
						</div>
					</template>
				</div>
			</div>
		</div>
		<div class="border mb-20" style="padding: 20px 10px">
			<p class="mb-10 fwb" style="font-weight: 500">团队盈亏</p>
			<DarkWaterRed
				v-if="curAgent.proxyLevel == 0"
				:startDate="curAgent.cycleStartDate"
				:endDate="curAgent.cycleEndDate"
				:proxyId="curAgent.proxyId"
			/>
			<div style="overflow: auto; display: -webkit-box">
				<div
					class="profitContent border mb-10"
					v-for="(item, index) in profitDetail"
					:key="index"
				>
					<p class="title">{{ item.title }}</p>
					<div class="top">
						<div class="item">
							<div>
								{{ item.top[0].label }}
								<el-tooltip placement="top-start">
									<div slot="content">
										场馆盈亏=代理净盈亏*代理占成比例
										<br />
										代理净盈亏=-(会员游戏输赢+输赢重算调整+有效投注返点+返点重算调整)
									</div>
									<i class="el-icon-question"></i>
								</el-tooltip>
							</div>
							<div
								class="num"
								:style="
									handleNumberColor(
										agentTeamBillDetail[item.top[0].prop]
									)
								"
							>
								{{
									handleNumber(
										'USTD',
										agentTeamBillDetail[item.top[0].prop],
										2,
										true,
										true
									)
								}}
							</div>
						</div>

						<div
							class="flex item"
							style="justify-content: space-around"
						>
							<div>
								<p>
									{{ item.top[1].label }}
								</p>
								<div class="num">
									{{
										handleNumber(
											'USDT',
											agentTeamBillDetail[
												item.top[1].prop
											],
											2,
											true,
											true
										)
									}}
								</div>
							</div>
							<span>X</span>
							<div>
								<p>{{ item.top[2].label }}</p>
								<div class="num">
									{{
										agentTeamBillDetail[item.top[2].prop] ||
										0
									}}%
								</div>
							</div>
						</div>
					</div>
					<div class="bottom">
						<div class="arrow"></div>
						<el-row>
							<el-col
								class="bot-item flex"
								v-for="(botItem, botIndex) in item.bottom"
								:key="botIndex"
								:span="12"
							>
								<p style="margin-right: 10px">—</p>
								<div>
									<p>{{ botItem.label }}</p>
									<p
										class="num"
										:style="
											handleNumberColor(
												agentTeamBillDetail[
													botItem.prop
												]
											)
										"
									>
										{{
											handleNumber(
												'USDT',
												agentTeamBillDetail[
													botItem.prop
												],
												2,
												true,
												true
											)
										}}
									</p>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
		<div class="child-team-detail border" v-loading="loading">
			<p class="mb-10" style="font-weight: 500">
				下级团队盈亏(直属代理
				<span style="color: #409eff">{{ childTeamList.length }}</span>
				人)
			</p>
			<el-empty
				v-if="
					// curData.personNetAmount == 0 &&
					// curData.teamNetAmount == 0 &&
					// curData == childTeamNetAmount
					!childTeamList.length
				"
				description="暂无数据"
			></el-empty>
			<el-row v-else :gutter="20">
				<el-col
					v-for="(item, index) in childTeamList"
					:key="index"
					:span="12"
				>
					<div class="border item">
						<div
							class="flex"
							style="
								justify-content: space-between;
								margin-bottom: 30px;
							"
						>
							<p>
								{{ item.proxyName }}
								<el-tag effect="plain" size="mini">直属</el-tag>
							</p>
							<a @click="goDetail(item)">详情 ></a>
						</div>
						<div
							class="flex"
							style="
								justify-content: space-around;
								align-items: center;
								text-align: center;
							"
						>
							<div
								v-for="(subItem, index) in teamDetailList"
								:key="index"
							>
								<template v-if="subItem.prop === '='">
									=
								</template>
								<template v-else-if="subItem.prop === '-'">
									-
								</template>
								<template v-else>
									<div>
										<span>{{ subItem.label }}</span>
									</div>
									<div
										class="num"
										:style="
											handleNumberColor(
												item[subItem.prop]
											)
										"
									>
										{{
											handleNumber(
												'USTD',
												item[subItem.prop],
												2,
												true,
												true
											)
										}}
									</div>
								</template>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getDetail } from './columns'
import DarkWaterRed from '@/components/Funds/DarkWaterRed/index'
export default {
  components: {
    DarkWaterRed
  },
  mixins: [list],
  props: {
    curData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      dayjs,
      teamDetailList: [
        {
          label: '个人盈亏',
          prop: 'personNetAmount'
        },
        {
          label: '',
          prop: '='
        },
        {
          label: '团队盈亏',
          prop: 'teamNetAmount'
        },
        {
          label: '',
          prop: '-'
        },
        {
          label: '下级团队盈亏',
          prop: 'childTeamNetAmount'
        }
      ],
      dividendsList: [
        {
          title: '体育',
          dividendsPayable: '111',
          validBets: '222',
          dividendRatio: '333',
          platformProportion: '444'
        },
        {
          title: '电竞',
          dividendsPayable: '111',
          validBets: '222',
          dividendRatio: '333',
          platformProportion: '444'
        },
        {
          title: '棋牌',
          dividendsPayable: '111',
          validBets: '222',
          dividendRatio: '333',
          platformProportion: '444'
        },
        {
          title: '彩票',
          dividendsPayable: '111',
          validBets: '222',
          dividendRatio: '333',
          platformProportion: '444'
        },
        {
          title: '电子',
          dividendsPayable: '111',
          validBets: '222',
          dividendRatio: '333',
          platformProportion: '444'
        },
        {
          title: '真人',
          dividendsPayable: '111',
          validBets: '222',
          dividendRatio: '333',
          platformProportion: '444'
        }
      ],
      profitDetail: [],
      childTeamList: [], // 下级代理列表
      agentTeamBillDetail: {}, // 团队盈亏
      curAgent: {}, // 当前查询的代理
      curAgentList: [], // 临时存储正在查看的下级代理
      loading: false
    }
  },
  created() {
    this.curAgent = this.curData
    this.profitDetail = getDetail()
  },
  mounted() {
    this.getAgentDetailData()
  },
  methods: {
    async getAgentDetailData() {
      if (this.curAgentList.length > 0) {
        await this.getChildTeamRateBillDetail(this.curAgent)
        await this.getTeamRateBillDetail(this.curAgent)
      } else {
        await this.getChildTeamRateBillDetail(this.curData)
        await this.getTeamRateBillDetail(this.curData)
      }
    },
    async getChildTeamRateBillDetail(data) {
      const { proxyLevel, proxyId, cycleStartDate, cycleEndDate } = data
      await this.$api
        .getChildTeamRateBillDetail({
          proxyLevel,
          proxyId,
          cycleStartDate,
          cycleEndDate
        })
        .then((res) => {
          if (res?.code === 200) {
            this.childTeamList = res?.data || []
          }
        })
    },
    async getTeamRateBillDetail(data) {
      const { proxyLevel, proxyId, cycleStartDate, cycleEndDate } = data
      await this.$api
        .getTeamRateBillDetail({
          proxyLevel,
          proxyId,
          cycleStartDate,
          cycleEndDate
        })
        .then((res) => {
          if (res?.code === 200) {
            this.agentTeamBillDetail = res?.data || {}
          }
        })
    },
    async goDetail(item) {
      try {
        this.loading = true
        this.curAgent = item
        this.curAgentList.push(item)
        await this.getAgentDetailData()
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    async goBack() {
      try {
        this.loading = true
        if (this.curAgentList.length > 1) {
          this.curAgentList.pop()
          this.curAgent = this.curAgentList[this.curAgentList.length - 1]
          await this.getAgentDetailData()
          this.loading = false
        } else if (this.curAgentList.length === 1) {
          this.curAgentList.pop()
          this.curAgent = this.curData
          await this.getAgentDetailData()
          this.loading = false
        } else {
          this.loading = false
          this.$emit('goBack')
        }
      } catch (error) {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	overflow: scroll;
	padding: 20px;
	::v-deep .el-loading-mask {
		z-index: inherit;
	}
	.team-detail {
		padding: 15px 20px;
		.team-left {
			margin-left: 30px;
			margin-right: 50px;
			p {
				margin: 10px 0;
				font-weight: 500;
				font-size: 14px;
				&:last-child {
					font-weight: normal;
					font-size: 12px;
				}
			}
		}
		.team-right {
			align-items: center;
			text-align: center;
			flex: 1;
			.right-item {
				margin: 0 30px;
				.num {
					font-size: 28px !important;
				}
			}
		}
	}

	.profitContent {
		width: 330px;
		margin-right: 20px;
		text-align: center;
		.top {
			padding: 0 20px;
			margin-bottom: 10px;
			.num {
				font-weight: 600 !important;
			}
		}
		.bottom {
			padding: 10px 0;
			border-top: 1px solid #ccc;
			position: relative;
			.bot-item {
				padding: 20px 0;
				justify-content: center;
				align-items: center;
				p {
					margin-bottom: 10px;
				}
			}
			&:before {
				content: '';
				border-left: 13px solid transparent;
				border-bottom: 16px solid #ccc;
				border-right: 13px solid transparent;
				position: absolute;
				top: -16px;
				left: 22%;
			}
			&:after {
				content: '';
				border-left: 11px solid transparent;
				border-bottom: 14px solid #fff;
				border-right: 11px solid transparent;
				position: absolute;
				top: -14px;
				left: calc(22% + 2px);
			}
		}
		&:first-child {
			margin-right: 20px;
		}
		.title {
			line-height: 40px;
			background-color: #ebeef5;
		}
		.item {
			padding: 20px;
			align-items: center;
			p {
				flex: 1;
				text-align: left;
				span {
					color: #aaa;
				}
			}
		}
	}
	.child-team-detail {
		padding: 20px 10px;
		.item {
			padding: 20px;
			margin-bottom: 20px;
			p {
				font-weight: 500;
			}
			a {
				color: #409eff;
				cursor: pointer;
				font-weight: 500;
			}
		}
	}

	.border {
		border: 1px solid #ccc;
		border-radius: 5px;
	}
	.num {
		font-weight: 500;
		margin-top: 5px;
	}
	.m-20 {
		margin: 20px;
	}
	.mb-10 {
		margin-bottom: 10px;
	}
	.mb-20 {
		margin-bottom: 20px;
	}
}
.date {
	font-size: 14px;
}
.fwb {
	font-weight: bold;
}
.amount {
	font-size: 18px;
}
.dividends-title {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
	font-size: 14px;
}
.dividends-content {
	display: flex;
	flex-wrap: wrap;
	.item {
		margin-bottom: 20px;
		padding: 20px;
		width: 49%;
		&:nth-child(2n + 1) {
			margin-right: 2%;
		}
		.title {
			font-size: 16px;
			font-weight: bold;
		}
		.list {
			display: flex;
			justify-content: space-around;
			align-items: center;
			.item1 {
				text-align: center;
				.label,
				.num {
					font-size: 14px;
				}
			}
		}
	}
}
</style>
